<template>
  <a-pagination class="base-pagination" show-quick-jumper show-size-changer
    :show-total="(total) => `共计${total}条记录 第${pageKey.current}/${totalPage}页`" v-bind="{ ...pageKey, ...$attrs }"
    v-on="$listeners" @change="onChange" @showSizeChange="onShowSizeChange" />
</template>

<script>
export default {
  name: 'BasePagination',
  props: {
    pageKey: { // 要使用.sync
      type: Object,
      required: true,
    },
    getList: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    totalPage() {
      const { total, pageSize } = this.pageKey;
      return Math.ceil(parseInt(total) / parseInt(pageSize));
    },
  },
  methods: {
    onChange(pageNumber) {
      const newPageKey = { ...this.pageKey, current: pageNumber };
      this.$emit('update:pageKey', newPageKey);
      this.getList();
    },
    onShowSizeChange(current, pageSize) {
      const newPageKey = { ...this.pageKey, pageSize };
      this.$emit('update:pageKey', newPageKey);
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
// @import "~ant-design-vue/dist/antd.less";
// .base-pagination {
//   /deep/ .ant-pagination-total-text {
//     color: @text-color-secondary;
//     margin-right: 22px;
//   }
// }</style>
